<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- v-cloak 解决vue.js加载过慢的问题，直到vue.js加载完成后财display：block -->
    <!-- v-once 只渲染一次。 -->
    <div id="app" v-cloak>
        {{message}}
        <span v-once>{{message}}</span>

        <p v-if="status===1">当status为1的时候显示</p>
        <p v-else-if="status===2">当status为2的时候显示</p>
        <p v-else="status===2">否则显示该行</p>
        <template v-if="status2===1">
                <p v-if="status===1">当status为1的时候显示</p>
                <p v-else-if="status===2">当status为2的时候显示</p>
                <p v-else="status===2">否则显示该行</p>
        </template>
        <hr>
        <p>input的内容不会发生变化，说明input元素被复用了</p>
        <template v-if="type==='name'">
            <label>user:</label>
            <input placeholder="input username">
        </template>
        <template v-else>
                <label>email:</label>
                <input placeholder="input email">
            </template>
            <button @click="toggleclick">切换输入类型</button>
            <hr>
            <p>input加了key的属性，这个时候就一定复写了</p>
        <template v-if="type==='name'">
            <label>user:</label>
            <input placeholder="input username" key="name-input">
        </template>
        <template v-else>
                <label>email:</label>
                <input placeholder="input email" key="name-email">
            </template>
        <button @click="toggleclick">切换输入类型</button>
        <hr>
        <br> 
        <br>
        <p v-show="status===1">v-show的用法，就是display：none，<b>v-show不能用在tempplate中</b></p>
        <hr>
        <br> 
        <br>
        <p>v-for 传递的是数组</p>
        <ul>
            <li v-for = "book,index in books">{{index}}-{{book.name}}</li>
        </ul>  
        <button @click="add">add datas</button>
        <p>key,index是可选参数，分别是字典的key值和索引</p>
        <ul>
                <li v-for = "(value,key,index) in tools">{{index}}-{{key}}-{{value}}</li>
            </ul>
        <p>v-for还可以直接循环整数</p>
            <span v-for="n in 10">{{n}} </span>

            <hr>
            <template v-for="book in books2">
                <li>书名：{{book.name}}</li>
                <li>作者：{{book.author}}</li>
            </template>

            <template v-for="book in filterbooks">
                    <li>书名：{{book.name}}</li>
                    <li>作者：{{book.author}}</li>
                </template>

                <hr>
                点击次数：{{counter}}
                <button @click="counter++">+1</button>
                <p>这里的方法如果没有参数，可以不加括号，默认调用原生事件event></p>
                <button @click="add10()">+10</button>
                <p>vue提供了一个特殊变量$event，用于访问原生DOM事件</p>
                
                <a href="http://www.apple.com/cn" @click="handleClick('禁止打开',$event)">open url</a>

                <input @click.stop.prevent="handle" placeholder="这里调用了stop.prevent的原生方法" v-model="handle()">



    </div>
    <script>   
        var app = new Vue({
            el:'#app',
            data:{
                counter:0,
                message:'this is a text',
                status:1,
                status2:1,
                type : 'name',
                books:[
                    {name:'vuejs实战'},
                    {name:'javascript原理'},
                    {name:'django流程'}
                    ],
                tools:{
                    a:'红春',b:'彩霞',c:'张芳',d:'大奶鲁'
                },
                books2:[
                    {name:'vuejs实战',author:'wyh'},{name:'java',author:'bc'},{name:'php',author:'bcsd'}
                ]
                
            },
            computed:{
                
                filterbooks:function(){
                    return this.books2.filter(function(book){
                        var a = book.name.match(/java/);
                        
                        if(a){
                            return a;
                        }
                        })
                        
                } 
            },
            methods:{
                handle:function(){
                    
                    //alert("这里调用了stop.prevent的原生方法")
                    return 'aaa'
                },
                handleClick:function(message,event){
                    event.preventDefault();
                    window.alert(message);
                },
                add10:function(){
                    return this.counter+=10;
                },
                toggleclick:function(){
                    this.type = this.type ==='name'?'mail':'name'
                },
                add:function(){
                    this.books.push({name:'python实战'})
                }
            }
        });
        app.books.push({name:'php表演'})
        app.books.sort();
        //过滤值
        app.books2 = app.books2.filter(function(item){
            
            return item.name.match(/java/)
        }) 
        //设置值，在组件化中使用$set
        Vue.set(app.books2,1,{
            name:'css seicet',
            author:'lea verou'
        });



    </script>
</body>
</html>